<template>
  <div class="home">
    <canvas id="canvas"></canvas>

    <!--内容 B-->
    <div class="hms">
      <!--头部 B-->
      <div class="head">
        <!--标题 B-->
        <!-- <div class="title"><span>{{ Obj.visualName }}</span></div> -->
        <div class="title"><span>汉石桥综合展示</span></div>
        <!--<div class="title"><span>林长制综合展示平台</span></div>-->
        <!--标题 E-->
        <!--标题下划线 B-->
        <div class="xhx"></div>
        <!--标题下划线 E-->

        <!--tab 导航B-->
        <div class="nav">
          <div>
            <router-link v-for="(item, index) in navList" :to="{ path: item.path }" :key="index" class="nv"><span>{{
              item.name }}</span>
            </router-link>
            <div class="nv"><span>生态环境</span></div>
            <div class="nv"><span>生态安全</span></div>
            <!--<div class="nv"><span>森林经营 </span></div>-->
            <!--
            野鸭湖
            <div class="nv"><span>点位核查</span></div>
             <div class="nv"><span>疫源疫病</span></div>-->
          </div>

        </div>
        <!--tab 导航E-->

      </div>
      <!--头部 E-->

      <!--变换内容 B-->
      <div class="bhnr">
        <router-view />
      </div>
      <!--变换内容 E-->
    </div>
    <!--内容 E-->

    <!--假背景 B-->
    <div class="jbj">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!--假背景 E-->
  </div>
</template>

<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  name: "home",
  data() {
    return {
      navList: [
        { name: '基本信息', path: '/home/jbxx' },
        { name: '资源管护', path: '/home/xhjc' },
        // {name: '本底资源', path: '/home/bdzy'},
        { name: '生物资源', path: '/home/Newbdzy' },
        // {name: '视频监控', path: '/home/shipinjiankong'},
        // { name: '红外相机', path: '/home/hwxj' },
        // {name: '森林经营', path: '/home/sljy'},
        // {name: '森林保护', path: '/home/slbh'},
        // {name: '视频监控', path: '/home/ysy'},
        // {name: '点位核查', path: '/home/dwhc'},
        // {name: '疫源疫病', path: '/home/yyyb'}
      ],
      Obj: {
        name: ""
      },
      areaId: "",

    }
  },
  created() {
    // window.sessionStorage.setItem('areaId', '0000011');

    /*
    野鸭湖
    navList: [
      {name: '基本信息', path: '/home/jbxx'},
      {name: '本底资源', path: '/home/bdzy'},
      {name: '巡护监测', path: '/home/xhjc'},
      // {name: '视频监控', path: '/home/shipinjiankong'},
      {name: '红外相机', path: '/home/hwxj'},
      {name: '视频监控', path: '/home/ysy'},
      // {name: '点位核查', path: '/home/dwhc'},
      // {name: '疫源疫病', path: '/home/yyyb'}
    ],*/
    this.areaId = window.sessionStorage.getItem('areaId');
    this.getEvenDetail();
  },
  mounted() {
    this.remove();
  },
  methods: {
    getEvenDetail() {
      let _that = this;
      (async function f() {
        let res = await http.get(api.EvenDetail + _that.areaId)
        _that.Obj = res.data;

      })()
    },
    remove() {
      var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        hue = 217,
        stars = [],
        count = 0,
        maxStars = 1000;//星星数量
      let canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
      canvas2.width = 100;
      canvas2.height = 100;
      let half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
      gradient2.addColorStop(0.025, '#CCC');
      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
      gradient2.addColorStop(1, 'transparent');
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }
        if (min > max) {
          let hold = max;
          max = min;
          min = hold;
        }
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        let max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2.5;
        //星星移动范围，值越大范围越小，
      }

      let Star = function () {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 15;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 400000;
        //星星移动速度
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
      }
      Star.prototype.draw = function () {
        let x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);
        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }
        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
      }
      for (let i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h)
        ctx.globalCompositeOperation = 'lighter';
        for (let i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        }
        window.requestAnimationFrame(animation);
      }

      animation();
    },
  }
}
</script>

<style scoped>
@import "../../static/css/home.css";
</style>
